<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>CSS Toggle Switch: Accessible CSS toggle switch using standard form controls, with Foundation</title>
	<meta name="description" content="Accessible, screen-reader friendly, CSS-only toggle switches with full keyboard access and mobile support, using standard form controls.">
	<meta name="author" content="Ionuț Colceriu">

	<!-- Docs styles, not required by the switches -->
	<link rel="stylesheet" href="dist/docs/foundation.css">
	<link href='http://fonts.googleapis.com/css?family=Roboto:400' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="dist/docs/docs.css">

	<!-- Toggle Switch -->
	<link rel="stylesheet" href="dist/toggle-switch.css">

	<!-- Prism Syntax Highlighter -->
    <link rel="stylesheet" href="bower_components/prism/themes/prism.css">
    <link rel="stylesheet" href="bower_components/prism/themes/prism-okaidia.css">
    <script src="bower_components/prism/prism.js"></script>
</head>
<body>

	 <header class="row">
		<div class="large-7 columns">
			<h1>
				<a href="index.html">CSS Toggle Switch</a>
			</h1>
			<p class="description">Accessible CSS toggle switch using standard form controls</p>
		</div>
		<div class="large-5 columns">
			<ul class="inline-list right top-menu">
				<li><a href="index.html">Standalone</a></li>
				<li><a href="bootstrap.html">Bootstrap</a></li>
				<li><a href="foundation.html" class="active">Foundation</a></li>
			</ul>
		</div>
	</header>

	<div class="row">
		<div class="large-12 columns">
			<div class="hero-box">

				<div class="row">
					<div class="large-6 columns">

						<h4>Light switch</h4>
						<p>Use the official switch, provided by Foundation, for for simple <em>&ldquo;On/Off&rdquo;</em> options. </p>

						<div class="row toggle-demo">
							<label class="large-3 columns">View</label>
							<div class="large-5 columns left">
								<div class="switch">
									<input id="x" name="switch-x" type="radio" checked>
									<label for="x" onclick="">Off</label>

									<input id="x1" name="switch-x" type="radio">
									<label for="x1" onclick="">On</label>

									<span></span>
								</div>
							</div>
						</div>

					</div>
					<div class="large-6 columns">

						<h4>Toggle switch</h4>
						<p>Use the toggle switches, instead of radio buttons, for two or more, specific options. </p>

						<div class="row toggle-demo">
							<label class="large-3 columns">View</label>
							<div class="switch-toggle switch-3 panel large-9 columns">
								<input id="week-d1" name="view-d" type="radio" checked>
								<label for="week-d1" onclick="">Week</label>

								<input id="month-d2" name="view-d" type="radio">
								<label for="month-d2" onclick="">Month</label>

								<input id="month-d3" name="view-d" type="radio">
								<label for="month-d3" onclick="">Year</label>

								<a class="button"></a>
							</div>
						</div>

					</div>

				</div>

				<div class="row dependency-install">

					<div class="large-12 columns">
						<pre><code><a href="http://bower.io/">bower</a> install --save css-toggle-switch</code></pre>
						<pre><code><a href="http://component.io/">component</a> install ghinda/css-toggle-switch</code></pre>
					</div>

				</div>

				<div class="nav-bar hero-actions">
					<ul class="button-group">
						<li>
							<a href="https://github.com/ghinda/css-toggle-switch/archive/gh-pages.zip" class="button">
								<i class="icon-arrow-down"></i>
								Download
							</a>
						</li>
						<li>
							<a href="https://github.com/ghinda/css-toggle-switch" class="button">
								<i class="icon-github"></i>
								Github
							</a>
						</li>
					</ul>
				</div>

			</div>
		</div>
	</div>

	<div class="row">
		<div class="large-12 columns">

			<h5 class="frameworks text-center">
				You can use the switches <a href="index.html">standalone</a>, with <a href="bootstrap.html">Bootstrap</a> or with <a href="foundation.html">Foundation</a>.
			</h5>

		</div>
	</div>

	<div class="row">

		<div class="large-12 columns">

			<h2>Light switch</h2>
			<p>Use the official switch, provided by Foundation, for for simple <em>&ldquo;On/Off&rdquo;</em> options. The official <em>Switch</em> component is based on code from <a href="http://ghinda.net/css-toggle-switch/">CSS Toggle Switches</a>. </p>

			<div class="example large-12 columns">

				<div class="row toggle-demo">
					<label class="large-2 columns">View</label>
					<div class="large-3 columns left">
						<div class="switch">
							<input id="y" name="switch-y" type="radio" checked>
							<label for="y" onclick="">Off</label>

							<input id="y1" name="switch-y" type="radio">
							<label for="y1" onclick="">On</label>

							<span></span>
						</div>
					</div>
				</div>

<pre><code class="language-markup">&lt;div class=&quot;switch&quot;&gt;
	&lt;input id=&quot;y&quot; name=&quot;switch-y&quot; type=&quot;radio&quot; checked&gt;
	&lt;label for=&quot;y&quot; onclick=&quot;&quot;&gt;Off&lt;/label&gt;

	&lt;input id=&quot;y1&quot; name=&quot;switch-y&quot; type=&quot;radio&quot;&gt;
	&lt;label for=&quot;y1&quot; onclick=&quot;&quot;&gt;On&lt;/label&gt;

	&lt;span&gt;&lt;/span&gt;
&lt;/div&gt;
</code></pre>

			</div>

		</div>

	</div>

	<div class="row">

		<div class="large-12 columns">

			<h2>Toggle switch</h2>

			<p>Use the toggle switches, instead of radio buttons, for two or more specific options. </p>

			<div class="example">

				<label>View</label>
				<div class="switch-toggle panel large-5">
					<input id="week" name="view" type="radio" checked>
					<label for="week" onclick="">Week</label>

					<input id="month" name="view" type="radio">
					<label for="month" onclick="">Month</label>

					<a class="button"></a>
				</div>

<pre><code class="language-markup">&lt;label&gt;View&lt;/label&gt;
&lt;div class=&quot;switch-toggle panel&quot;&gt;
	&lt;input id=&quot;week&quot; name=&quot;view&quot; type=&quot;radio&quot; checked&gt;
	&lt;label for=&quot;week&quot; onclick=&quot;&quot;&gt;Week&lt;/label&gt;

	&lt;input id=&quot;month&quot; name=&quot;view&quot; type=&quot;radio&quot;&gt;
	&lt;label for=&quot;month&quot; onclick=&quot;&quot;&gt;Month&lt;/label&gt;

	&lt;a class=&quot;button&quot;&gt;&lt;/a&gt;
&lt;/div&gt;
</code></pre>

			</div>

			<h3>Multiple options</h3>
			<p>You can add up to 5 items by using the <code>.switch-3</code>, <code>.switch-4</code> and <code>.switch-5</code> classes. </p>

			<div class="example">

				<label>View</label>
				<div class="switch-toggle switch-5 panel">
					<input id="hour3" name="view3" type="radio" checked>
					<label for="hour3" onclick="">Hour</label>

					<input id="day4" name="view3" type="radio">
					<label for="day4" onclick="">Day</label>

					<input id="week5" name="view3" type="radio">
					<label for="week5" onclick="">Week</label>

					<input id="month6" name="view3" type="radio">
					<label for="month6" onclick="">Month</label>

					<input id="year7" name="view3" type="radio">
					<label for="year7" onclick="">Year</label>

					<a class="button"></a>
				</div>

<pre><code class="language-markup">&lt;label&gt;View&lt;/label&gt;
&lt;div class=&quot;switch-toggle switch-5 panel&quot;&gt;
	[&hellip;]
</code></pre>

			</div>

		</div>

	</div>

	<div class="row">

		<div class="large-12 columns">

			<h2>Different looks</h2>

			<p>The switches are very flexible, so you can use and combine a number of classes provided by Foundation, along with it's grid, to make them look exactly like you need them. </p>

			<div class="example">

				<label>View</label>
				<div class="switch-toggle large-4 panel radius">
					<input id="week41" name="view4" type="radio" checked>
					<label for="week41" onclick="">Week</label>

					<input id="month42" name="view4" type="radio">
					<label for="month42" onclick="">Month</label>

					<a class="button radius"></a>
				</div>

				<label>View</label>
				<div class="switch-toggle switch-3 panel callout">
					<input id="week51" name="view5" type="radio" checked>
					<label for="week51" onclick="">Week</label>

					<input id="month52" name="view5" type="radio">
					<label for="month52" onclick="">Month</label>

					<input id="month53" name="view5" type="radio">
					<label for="month53" onclick="">Year</label>

					<a class="button secondary"></a>
				</div>

				<label>View</label>
				<div class="switch-toggle switch-4 panel">
					<input id="week61" name="view6" type="radio" checked>
					<label for="week61" onclick="">Week</label>

					<input id="month62" name="view6" type="radio">
					<label for="month62" onclick="">Month</label>

					<input id="year63" name="view6" type="radio">
					<label for="year63" onclick="">Year</label>

					<input id="decade63" name="view6" type="radio">
					<label for="decade63" onclick="">Decade</label>

					<a class="button success disabled"></a>
				</div>

			</div>

			<div class="example">

				<label>View</label>
				<div class="switch-toggle large-4 alert-box secondary round">
					<input id="week71" name="view7" type="radio" checked>
					<label for="week71" onclick="">Week</label>

					<input id="month72" name="view7" type="radio">
					<label for="month72" onclick="">Month</label>

					<a class="button round"></a>
				</div>

				<label>View</label>
				<div class="switch-toggle switch-3 alert-box secondary radius">
					<input id="week81" name="view8" type="radio" checked>
					<label for="week81" onclick="">Week</label>

					<input id="month82" name="view8" type="radio">
					<label for="month82" onclick="">Month</label>

					<input id="month83" name="view8" type="radio">
					<label for="month83" onclick="">Year</label>

					<a class="button alert radius disabled"></a>
				</div>

			</div>

		</div>

	</div>

	<div class="row">
		<div class="large-12 columns">
			<h3>
				<a href="http://foundation.zurb.com/" target="_blank">Get Foundation.</a>
			</h3>
		</div>
	</div>

	<footer>
		<div class="row">
			<div class="large-12 columns">
				<p>
					<a href="https://github.com/ghinda/css-toggle-switch">CSS Toggle Switch</a> is a project by <a href="http://ghinda.net">Ionuț Colceriu</a>. Follow <a href="https://twitter.com/ghindas">@ghindas</a>.
				</p>
			</div>
		</div>
	</footer>

	<script>
	(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
	(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
	m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
	})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

	ga('create', 'UA-19824700-1', 'ghinda.net');
	ga('send', 'pageview');
	</script>

</body>
</html>
